<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>联系我们</title>
    <script src="js/classie.js"></script>
    <script src="js/modalEffects.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
    <script type="text/javascript"src="js/ChackLi.js"></script>
    <script type="text/javascript" src="js/seachByID.js"></script>
    <script src="js/Stock_get.js" type="text/javascript"></script>
    <script src="js/Bid_get.js" type="text/javascript"></script>
    <script src="js/resume_get.js"></script>
    <script src="js/Stork_orderPost.js" type="text/javascript"></script>
    <script src="js/postJs.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery1.min.js"></script>
    <style type="text/javascript" src=""></style>
    <script type="text/javascript" src="js/inputjs.js"></script>
    <link href="css/css1.css" type="text/css" rel="stylesheet">
    <link href="css/component.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
    <script src="js/postJs.js" type="text/javascript"></script>
    <script src="js/http_cdn.static.runoob.com_libs_bootstrap_3.3.7_js_bootstrap.js"></script>
    <script src="js/http_cdn.static.runoob.com_libs_jquery_2.1.1_jquery.js"></script>



</head>
<script type="text/javascript">

  /**
   *
   * @authors chenDeChang (you@example.org)
   * @date    2016-11-10 17:04:35
   *
   *
   *说明：本方法基于bootstrap对模态框进行封装；
   *界面构造(必须给予madal控件ID)
   <!-- 弹出框 -->
   <div class="modal fade" id="xxx" tabindex="-1">
   <!-- 窗口声明 -->
   <div class="modal-dialog modal-sm">
   <!-- 内容声明 -->
   <div class="modal-content">
   <div class="modal-header">
   <button class="close" data-dismiss="modal"><span>&times;</span></button>
   <h4 class="modal-title" id="myModalLabel"></h4>
   </div>
   <div class="modal-body">
   <div id="modal_con"></div>
   </div>
   <div class="modal-footer">
   <button id="ok_btn" class="btn btn-sm btn-warning">确 定</button>
   </div>
   </div>
   </div>
   </div>
   *调用代码:
   * new show_modal({ modalId:"myModal",modalCon:'<p>这是提示的信息！</p>',bootstrapOptionObj:{show : true,backdrop : false}});
   *参数说明:
   *modalId:模态框控件的id，必需;
   *titleTxt:模态框控件的标题名称;
   *modalCon:模态框控件主体内容;
   *bootstrapOptionObj:bootstrap模态框控件的方法属性对象;
   *callback:处理完模态框后的回调方法;
   */

//显示弹窗函数
  var show_modal = function(setting){
    var _self = this;

    //判断为null或者空值
    _self.IsNull = function(value) {
      if (typeof (value) == "function") { return false; }
      if (value == undefined || value == null || value == "" || value.length == 0) {
        return true;
      }
      return false;
    }
    //默认配置
    _self.DefautlSetting = {
      modalId:'',
      titleTxt: '温馨提示',
      modalCon: '这是提示的信息！',
      bootstrapOptionObj: {show : true},
      callback: function() { }
    };
    //读取配置
    _self.Setting = {
      modalId: _self.IsNull(setting.modalId) ? _self.DefautlSetting.modalId : setting.modalId,
      titleTxt: _self.IsNull(setting.titleTxt) ? _self.DefautlSetting.titleTxt : setting.titleTxt,
      modalCon: _self.IsNull(setting.modalCon) ? _self.DefautlSetting.modalCon : setting.modalCon,
      bootstrapOptionObj: _self.IsNull(setting.bootstrapOptionObj) ? _self.DefautlSetting.bootstrapOptionObj : setting.bootstrapOptionObj,
      callback: _self.IsNull(setting.callback) ? _self.DefautlSetting.callback : setting.callback
    };
    //定义函数操作
    _self.int = function(){
      if (_self.Setting.modalId == '') {
        return;
      }
      $("#myModalLabel").text(_self.Setting.titleTxt);//这里设置弹窗的标题
      $("#modal_con").append(_self.Setting.modalCon);//设置弹窗内容
      $("#"+_self.Setting.modalId).modal(_self.Setting.bootstrapOptionObj);//设置弹窗的bootstrap属性方法
      _self.Setting.callback();
    }
    //执行操作
    _self.int();
  }

  //调用
  new show_modal({modalId:'alert_like',titleTxt:'牛逼闪闪的标题',modalCon:'<p>数据正在提交中...</p>',bootstrapOptionObj:{show:true,backdrop:false},callback:timeClose()});

  //show_modal回调函数，4s后隐藏弹窗
  function timeClose(){
    setTimeout(function(){
      $('#alert_like').modal('hide');
    },4000);
  }
</script>
<body>
<!-- header-->
<!-- 弹出框 -->
<div class="modal fade" id="alert_like" tabindex="-1">
    <!-- 窗口声明 -->
    <div class="modal-dialog modal-sm">
        <!-- 内容声明 -->
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body">
                <div id="modal_con"></div>
            </div>
            <div class="modal-footer">
                <button id="ok_btn" class="btn btn-sm btn-warning" data-dismiss="modal">确 定</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>